<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="待确认结算单" name="0"></el-tab-pane>
				<el-tab-pane label="已确认结算单" name="1"></el-tab-pane>
			</el-tabs>
        </el-header>
        <el-header v-if="groupId == 0">
            <div class="right-panel-search">
                <el-date-picker v-model="search.time_range" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <div class="search-input">合同单号</div>
                <el-input v-model="search.contract_no" placeholder="请输入合同单号" @change="waitUpsearch" clearable />
                <el-button type="primary" icon="el-icon-search" @click="waitUpsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="groupId == 0">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="结算单号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.statement_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="结算人" prop="creator_name" align="center"></el-table-column>
                <el-table-column label="承制人" prop="apply_name" align="center"></el-table-column>
                <el-table-column label="结算数量合计" prop="total_count" align="center"></el-table-column>
                <el-table-column label="结算贷款" prop="total_amount" align="center" sortable></el-table-column>
                <el-table-column label="扣款" prop="deduction_amount" align="center" sortable></el-table-column>
                <el-table-column label="补款" prop="repair_amount" align="center" sortable></el-table-column>
                <el-table-column label="实付货款" prop="goods_amount" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="90">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="showContract(scope.row, scope.$index)" v-auth="'wait.export'">导出</el-button>
                            <el-button text type="primary" size="small" @click="detail(scope.row, scope.$index)" v-auth="'wait.detail'">结算明细</el-button>
                            <el-popconfirm title="确认该结算单" @confirm="confirm(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="primary" size="small" v-auth="'wait.confirm'">确认结算单</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-header v-if="groupId == 1">
            <div class="right-panel-search">
                <el-date-picker v-model="searchs.time_range" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <div class="search-input">结算单号</div>
                <el-input v-model="searchs.statement_no" placeholder="请输入结算单号" @change="payUpsearch" clearable />
                <el-button type="primary" icon="el-icon-search" @click="payUpsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="groupId == 1">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="querys" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="结算单号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.statement_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="结算人" prop="creator_name" align="center"></el-table-column>
                <el-table-column label="承制人" prop="apply_name" align="center"></el-table-column>
                <el-table-column label="结算数量合计" prop="total_count" align="center"></el-table-column>
                <el-table-column label="结算贷款" prop="total_amount" align="center" sortable></el-table-column>
                <el-table-column label="扣款" prop="deduction_amount" align="center" sortable></el-table-column>
                <el-table-column label="补款" prop="repair_amount" align="center" sortable></el-table-column>
                <el-table-column label="实付货款" prop="goods_amount" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="确认状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.confirm_status!=2" type="danger">待确认</el-tag>
                        <el-tag v-else type="success">已确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="90">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="showContract(scope.row, scope.$index)" v-auth="'confirmed.export'">导出</el-button>
                            <el-button text type="primary" size="small" @click="detail(scope.row, scope.$index)" v-auth="'confirmed.detail'">结算明细</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <save-detail v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-detail>
    </el-container>
</template>
<script>
import saveDetail from './saveDetail.vue';
export default {
  components: { saveDetail },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false,
            },
			group: [],
			apiObj: this.$API.produce.setConfirm.lists,
            query:{
                confirm_status:1,
                is_local:1
            },
            querys:{
                confirm_status:2,
                is_local:1
            },
			selection: [],
			search: {
				time_range: null,
				contract_no: null,
			},
            searchs: {
				time_range: null,
				statement_no: null,
			},
            groupId:"0",
		}
	},
	mounted() {},
	methods: {
        // 同意
        async confirm(row){
                var res = await this.$API.produce.setConfirm.statementConfirm.post({statement_no:row.statement_no});
                if (res.code == 1) {
                    this.$message.success("操作成功");
                    this.$refs.table.refresh()
                } else {
                    this.$alert(res.message, "提示", { type: "error" });
                }
        },
        // 结算明细
        detail(row){
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
        },
		//搜索
		waitUpsearch() {
			this.$refs.table.upData(this.search)
		},
        payUpsearch() {
			this.$refs.table.upData(this.searchs)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.tables.refresh()
			} else if (mode == 'edit') {
				this.$refs.tables.refresh()
			} else if (mode == 'set') {
				this.$refs.tables.refresh()
			}
		},
        tabChange(e){
            this.groupId = e
            this.search.keyword = ''
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
